<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function(){
            var all=document.getElementById("all");//DOM对象
            var inputs=document.querySelectorAll("tbody input");//集合

            //给全选按钮绑定事件
            all.onclick=function(){
                if(all.checked){
                    for(var i=0;i<inputs.length;i++){
                        inputs[i].checked=true;
                    }
                }else{
                    for(var i=0;i<inputs.length;i++){
                        inputs[i].checked=false;
                    }
                }
            };


            //给tbody中的每一个input绑定事件
            for(var i=0;i<inputs.length;i++){

                inputs[i].onclick=function(){
                    var count=0;//个数
                    for(var j=0;j<inputs.length;j++){
                        if(inputs[j].checked){
                            count++;
                        }
                    }
                    console.log(count);
                    if(count==inputs.length){
                        all.checked=true;
                    }else{
                        all.checked=false;
                    }

                };
            }



        };
    </script>
</head>
<body>
    <table border="1" width="800">
        <thead>
        <tr>
            <th>
                <input type="checkbox" onclick="checkAll()" id="all">全选
            </th>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        </thead>
        <tbody align="center">
        <tr>
            <td><input type="checkbox"></td>
            <td>1</td>
            <td>tom</td>
            <td>10</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>2</td>
            <td>alice</td>
            <td>12</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>3</td>
            <td>coco</td>
            <td>14</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>4</td>
            <td>lucy</td>
            <td>12</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>5</td>
            <td>huahua</td>
            <td>15</td>
        </tr>
        </tbody>
    </table>
</body>
</html>